
<style lang="less" scoped>
.page{
  width: 100%;
  margin-left: 10px;
  margin-top: 10px;
}
.map-title{
  width: 100%;
  height: 60px;
  background-color: #667eea;
  color: white;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: x-large;
}
.map {
  width: 100%;
  height: calc(100vh);
  transform: rotate3d(1, 0, 0, 30deg);
  margin-top: -50px;
}
.card-body-map{
  display: flex;
  padding-bottom: 20px;
  justify-content: space-evenly;
}
.card-map{
  width: 20.5vw;
  height: 42vh;
  background-color: #667eea;
  border-radius: 5px;
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(216,216,216,0.5928965336134453) 1%, rgba(248,248,248,0.6012998949579832) 12%);
}
</style>

<template>
    <div class="page" >
        <div class="map-title">天梦星管理后台大屏可视化界面</div>
           <div style="width: 100%;height: 90%; display: flex;justify-content: center;align-items: center">
               <div ref="ChinaMaps" class="map"></div>
           </div>
           <div style="width: 100%;" >
           <div class="card-body-map">
              <div class="card-map">

              </div>
             <div class="card-map">

             </div>
             <div class="card-map">

             </div>
             <div class="card-map">

             </div>
           </div>
           </div>
    </div>

</template>

<script setup>
import * as echarts from 'echarts'
import chinaMapJson from '../../data-source/chinaMap.json'
import {onMounted,ref,reactive} from "vue";
import {AdressTrans} from "../../config/mapTrans"
import {selCoordinate} from "../../request/request"
var ChinaMaps =ref()
var GeoJson=[]
var chinaGeoCoordMap ={天梦星科技: [103.81143036949021, 25.502101828436917]}
const scatterPos = [103.81143036949021, 25.502101828436917];//指向地区中心点
var chinaDatas = []


onMounted(async () => {
  selCoordinateFun();
})

/**
 * @description 查询坐标点信息
 */
const selCoordinateFun=()=>{
  selCoordinate().then((res)=>{
    if (res.code==200){
      for (let item of res.data) {
        let typeName=item.coordinate.city? item.coordinate.city:item.coordinate.province
        let name="{\""+typeName+"\"\:\["+item.coordinate.lat+"\,"+item.coordinate.lng+"\]\}"
        GeoJson.push(JSON.parse(name))
      }

      let result=[]
      for (let item of GeoJson) {
        for (const itemKey in item) {
          if(itemKey!=undefined && !result.includes(itemKey)){
            result.push(itemKey);
            chinaDatas.push( [{
                name: itemKey,
                value: 1,
                ints: 10,
                obj: []
              },]);
            chinaGeoCoordMap=Object.assign(chinaGeoCoordMap,item)
          }
        }
      }
      for (let resultElement of chinaDatas) {
        for (const itemObj of res.data) {
          if (resultElement[0].name===itemObj.coordinate.city){
             let pushValue={title:itemObj.username}
             let setValue=resultElement[0].obj
                 setValue.push(pushValue)
            const map = new Map();
            const newArr = setValue.filter(v => !map.has(v.title) && map.set(v.title, 1));
            resultElement[0].obj=newArr
          }
        }
      }
      // console.log(chinaDatas)
      drawChina();
    }
  })
}

/**
 * @description {{缩放事件}}
 * @param e
 */
const onClickOpen = (e) => {
  if (e == 1) {
    drawChinaObj.roam = true
    drawChinaObj.zoom = 1.5
  } else if (e == 2) {
    drawChinaObj.roam = false
  } else if (e === 3) {
    drawChinaObj.zoom = drawChinaObj.zoom + 0.2
  } else if (e === 4) {
    drawChinaObj.zoom = drawChinaObj.zoom - 0.2
  } else {
    drawChina()
  }
  drawChina()
}

// 初始化
const drawChinaObj = reactive({
  hint: 1,
  roam: false,
  zoom: 1.4,
})
/**
 * 设置投射点
 * 中国地理坐标图
 */

const convertData = (data) => {
  var res = []
  for (var i = 0; i < data.length; i++) {
    var dataItem = data[i]
    var fromCoord = chinaGeoCoordMap[dataItem[0].name]
    var toCoord = scatterPos
    if (fromCoord && toCoord) {
      res.push([
        {
          tit: dataItem[0].obj,
          coord: fromCoord,
          value: dataItem[0].value,
        },
        {
          coord: toCoord,
        },
      ])
    }
  }
  return res
}

const drawChina = () => {
  var myChart = echarts.init(ChinaMaps.value)
  echarts.registerMap('china', chinaMapJson) //注册可用的地图

  var series = [];
  let dataInfo=[['天梦星科技', chinaDatas]];
  for (const item of dataInfo) {
    series.push(
        //设置指向箭头信息
        {
          type: 'lines',
          zlevel: 2,
          effect: {
            show: true,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 8, //图标大小
          },
          coords:[[1,2],[2,3]],
          lineStyle: {
            // normal: {
            color: '#adffd0',
            width: 1, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: 0.3, //尾迹线条曲直度
            // },
          },
          data: convertData(item[1]),
        },
        // 发射点位置涟漪等效果
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            //涟漪特效
            period: 4, //动画时间，值越小速度越快
            brushType: 'stroke', //波纹绘制方式 stroke, fill
            scale: 4, //波纹圆环最大限制，值越大波纹越大
          },
          itemStyle: {
            show: false,
            color: '#f8f9f5',
          },
          label: {
            show: true,
            position: 'top', //显示位置
            offset: [0, 0], //偏移设置
            formatter: function (params) {
              //圆环显示文字
              return params.data.name
            },
            fontSize: 4,
            emphasis: {
              show: true,
            },
          },
          symbol: 'circle',
          symbolSize: (val) => {
            return 5 + val[2] * 5 //圆环大小
          },

          data: item[1].map((dataItem) => {
            return {
              name: dataItem[0].name,
              tit: dataItem[0].obj,
              ints: dataItem[0].ints,
              value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
            }
          }),
        },
        //被攻击点
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            //涟漪相关
            period: 2,
            brushType: 'stroke',
            scale: 5,
          },
          itemStyle: {
            color: '#f00',
          },
          label: {
            show: true,
            position: 'right',
            offset:[1, 0],
            color: '#0f0',
            formatter: '{b}',
            textStyle: {
              color: '#fff',
              fontSize: 6,
            },
            emphasis: {
              show: true,
              color: '#f60',
            },
          },
          symbol: 'circle',
          symbolSize: 10, //圆圈大小
          data: [
            {
              name: item[0],
              value: chinaGeoCoordMap[item[0]].concat([10]),
            },
          ],
        },
    )
  };

  var option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(252, 252, 252, 0.82)',
      borderColor: '#fff',
      showDelay: 0,
      hideDelay: 0,
      enterable: true,
      transitionDuration: 0,
      extraCssText: 'z-index:100',
      formatter: (params, ticket, callback) => {
        //根据业务自己拓展要显示的内容
        // console.log(params,'params',)
        var res = ''
        var initss = 0
        var newArry = ''
        var name = params.name
        // var value = params.value[params.seriesIndex + 1]
        if (params.data.ints > 0) {
          initss = params.data.ints
        }
        if (params.data.tit?.length > 0) {
          newArry = Array.from(params.data.tit,(item)=> item.title)
        }
        res = "<div style='max-width:500px;white-space:pre-wrap;'><div>" + "来自用户("+name+"):" + '<div/>'+ "<div style='color: red;'>" + newArry + "</div></div>"
        return res
      },
    },
    geo: {
      show: true,
      center: [105.194115019531, 35.582111640625],
      map: 'china',
      roam: drawChinaObj.roam, //是否允许缩放，拖拽
      zoom: drawChinaObj.zoom, //初始化大小
      //缩放大小限制
      scaleLimit: {
        min: 0.1, //最小
        max: 12, //最大
      },
      //设置中心点
      //center: [95.97, 29.71],
      //省份地图添加背景
      //regions: regions,
      itemStyle: {
        // normal: {
        areaColor: '#3352c7',
        color: '#e91e63',
        borderColor: '#5e84fd',
        borderWidth: 2,
        // },
      },
      label: {
        color: 'rgba(255,255,255,0.5)',
        show: false,
      },
      //高亮状态
      emphasis: {
        label: {
          show: true,
          color: '#fff',
        },
        itemStyle: {
          areaColor: '#e91e63',
        },
      },
      z: 10,
    },
    //配置属性
    series: series,
  };
  myChart.setOption(option)
}

</script>


